<template>
    <div id="physical-test">
        <el-breadcrumb class="common-bread">
            <el-breadcrumb-item>体测管理</el-breadcrumb-item>
            <span class="phy-standard fr" @click="checkStandard()">体测标准</span>
        </el-breadcrumb>
        <div class="list contentBox">
            <div class="list_head">
                <span class="head_name">体测列表</span>
                <el-button class="list_btn" type="primary" @click="newTest()" icon="el-icon-circle-plus-outline">添加体测</el-button>
            </div>
            <el-row>
                <el-col :span="6" v-for="item in historyList" :key="item.physicalId">
                    <el-card class="mycard" @click.native="skipPhysicalInfo(item)" @mouseenter.native='enter(item)' @mouseleave.native='leave(item)'>
                        <div style="padding: 14px;">
                            <div class="testName" :title="item.physicalName">{{item.physicalName}}</div>
                            <div class="testName">参与学校：{{item.schoolCount}}所</div>
                            <div class="mytime" :title='item.startTime + "~" + item.endTime'>日期：{{item.startTime}}~{{item.endTime}}</div>
                        </div>
                        <div class="bottom" v-if="item.isShow">
                            <el-button size="small" type="text" @click.stop="skipPhysicalInfo(item)" class="btn1">体测详情</el-button>
                            <el-button size="small" type="text" @click.stop="editPhysicalTest(item)" class="btn2">编辑</el-button>
                            <el-button size="small" type="text" @click.stop="deletePhysicalTest(item)" class="btn3">删除</el-button>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <el-dialog title="手机验证" :visible.sync="dialogFormVisible">
            <div class="dia-content">
                <p style="line-height:36px;">该体测大类下已有体测数据，需要管理员手机验证：</p>
            </div>
            <div class="dia-content">
                <span>手机号码：{{phone}}</span>&nbsp; <el-button type="primary" :disabled="isdisabled" @click="sendVerificationCode"
                    size="small">{{btnText}}</el-button>
            </div>
            <el-form :model="form">
                <el-form-item label="验证码" label-width="120px">
                    <el-input size="small" class="dialog-input" maxlength="6" v-model="form.name" autocomplete="off"></el-input>
                    <span>（6位数字）</span>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="checkDelete()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { mapState, mapActions } from "vuex";

    export default {
        data() {
            return {
                historyList: [],
                pageNum: 1,
                pageSize: 100,
                phone: '',
                physicalId: '',
                isdisabled: false,
                btnText: '发送验证码',
                myinterval: null,
                dialogFormVisible: false,
                form: {
                    name: ''
                }
            };
        },
        watch: {
            dialogFormVisible() {
                if (this.dialogFormVisible == false) {
                    clearInterval(this.myinterval)
                }
            }
        },
        mounted() {
            this.getHistoryList();
        },
        destroyed() {
            clearInterval(this.myinterval)
        },
        computed: mapState({ user: state => state.user }),
        methods: {
            //获取列表数据
            getHistoryList() {
                this.historyList = [];
                let url = "/jlp/physical/list";

                this.$axios.post(url, {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize
                }).then(response => {
                    if (response.data.error == 10000) {
                        let arrlist = response.data.data;
                        if (arrlist && arrlist.length > 0) {
                            for (let i = 0; i < arrlist.length; i++) {
                                let $index = i + 1,
                                    $physicalName = arrlist[i].physicalName,
                                    $schoolCount = arrlist[i].schoolCount,
                                    $physicalId = arrlist[i].physicalId,
                                    $startTime = arrlist[i].startTime,
                                    $endTime = arrlist[i].endTime;

                                this.historyList.push({
                                    index: $index,
                                    isShow: false,
                                    physicalId: $physicalId,
                                    schoolCount: $schoolCount,
                                    physicalName: $physicalName,
                                    endTime: new Date($endTime).format("yyyy/MM/dd"),
                                    startTime: new Date($startTime).format("yyyy/MM/dd")
                                });
                            }
                        }
                    } else {

                    }
                });
            },
            // 体测标准
            checkStandard() {
                location.href = '/#/physicalStandard'
            },
            //新增体测
            newTest() {
                location.href = "/#/newPhysicalTest";
            },
            // 编辑体测
            editPhysicalTest(item) {
                // location.href = "/#/newPhysicalTest?physicalId=" + item.physicalId + '&physicalName=' + item.physicalName
                //     + '&endTime=' + item.endTime + '&startTime=' + item.startTime;
                let params = {
                    physicalId: item.physicalId,
                    physicalName: item.physicalName,
                    endTime: new Date(item.endTime).getTime(),
                    startTime: new Date(item.startTime).getTime(),
                }
                this.$util.refreshTo('/#/newPhysicalTest', params)
            },
            //删除体测动作
            deletePhysicalTest(row) {
                this.physicalId = row.physicalId
                this.$confirm("您确定要删除“" + row.physicalName + "”吗？删除后无法恢复。", "温馨提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消"
                }).then(() => {
                    // 验证是否有数据
                    this.checkedPHYScore(row.physicalId);

                    // 删除
                    // this.deletePhysical(row.physicalId);
                }).catch(() => { });
            },
            // 删除体测方法
            deletePhysical(physicalId) {
                let url = "/jlp/physical/delete";
                this.$axios.post(url, {
                    physicalId: physicalId
                }).then(response => {
                    if (response.data.error == 10000) {
                        this.$util.successMsg("删除成功");
                        this.getHistoryList();
                    } else {
                        this.$util.errorMsg(response.data.message);
                    }
                });
            },
            // 检验某个体测是否有体测数据
            checkedPHYScore(physicalId) {
                this.$axios.post('/jlp/physical/hasScore', {
                    physicalId: physicalId
                }).then(response => {
                    if (response.data.error == 10000) {
                        if (response.data.data.hasScore == 1) {
                            // 有体测成绩，需要再次验证
                            this.phone = response.data.data.phone
                            this.dialogFormVisible = true;
                        } else {
                            // 直接删除
                            this.deletePhysical(physicalId);
                        }
                    } else {
                        this.$util.errorMsg(response.data.message);
                    }
                }).catch(err => {
                });
            },
            // 发送验证码
            sendVerificationCode() {
                let seconds = 59;
                this.isdisabled = true;
                this.btnText = seconds + 's';
                this.myinterval = setInterval(() => {
                    if (seconds > 1) {
                        seconds -= 1;
                        this.btnText = seconds + 's';
                    } else {
                        // 倒计时结束
                        this.btnText = '发送验证码';
                        this.isdisabled = false;
                        clearInterval(this.myinterval);
                    }
                }, 1000)
                this.$axios.post('/jlp/physical/sendCode', {
                    phone: this.phone
                }).then((res) => {
                    console.log('发送验证码')
                })
            },
            checkDelete() {
                this.$axios.post('/jlp/physical/validCode', {
                    phone: this.phone,
                    physicalId: this.physicalId,
                    code: this.form.name
                }).then(response => {
                    if (response.data.error == 10000) {
                        this.dialogFormVisible = false;
                        this.$util.successMsg("删除成功");
                        this.getHistoryList();
                    }else{
                        this.$util.errorMsg(response.data.message);
                    }
                }).catch(err =>{
                    this.$util.errorMsg("短信验证码不正确");
                })
            },
            // 体测详情
            skipPhysicalInfo(row) {
                location.href = `/#/physicalInfo?physicalId=${row.physicalId}&physicalName=${row.physicalName}`;
            },
            enter(item) {
                item.isShow = true;
            },
            leave(item) {
                item.isShow = false;
            },
        }
    };
</script>

<style scoped>
    #physical-test .mycard {
        padding: 0px;
        height: 200px;
        /* background: #343f66; */
        background-image: linear-gradient(-180deg, #91D5FF 0%, #40A9FF 100%);
        text-align: center;
        margin-left: 20px;
        border-radius: 8px;
        cursor: pointer;
        position: relative;
        margin-bottom: 20px;
        overflow: visible;
    }

    #physical-test .mytime {
        font-size: 13px;
        color: #999;
        font-family: "PingFangSC-Regular";
        color: #ffffff;
        /* margin-top: 50px; */
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    #physical-test .testName {
        margin-bottom: 25px;
        width: 100%;
        overflow: hidden;
        text-align: center;
        font-family: "PingFangSC-Regular";
        font-size: 18px;
        color: #ffffff;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    #physical-test div.bottom {
        background: rgba(255, 255, 255, 0.9);
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 50px;
        line-height: 50px;
    }

    #physical-test .btn1 {
        position: absolute;
        right: 95px;
        top: 15px;
    }

    #physical-test .btn2 {
        position: absolute;
        right: 60px;
        top: 15px;
    }

    #physical-test .btn3 {
        position: absolute;
        right: 25px;
        top: 15px;
    }

    .dialog-input {
        width: 80px;
        line-height: 32px;
    }

    .dia-content {
        font-size: 16px;
        padding-left: 60px;
        margin-bottom: 10px;
    }
</style>